Коришћење графичког едитора¶
Скреч има уграђен едитор слика који можеш да користиш за креирање и измене ликова, костима и позадина. Овај едитор подржава цртање у два режима: растерском и векторском. У овом поглављу ћемо, кроз примере пројеката у којима се користе ликови и позадине које смо сами нацртали или изменили, представити могућности алата расположивих у оба режима.
Прво ћемо крeирати нови лик – Пинокија, коришћењем едитора у растерском режиму и направити анимацију у којој он игра уз музику. Затим ћемо коришћењем едитора у векторском режиму направити лик мачка Мргуда и различите костиме за цвет руже – ликове пројекта Које је боље – илустрацију истоимене песмице Чика Јове Змаја. Kроз креирање пројекта Дан и ноћ показаћемо још неке специфичности коришћења векторског начина цртања. На крају ћемо научити како се од дела позадине може направити нови лик кроз пројекат Лептирићи.
Рачунари могу да памте слике на два начина: растерском и векторском.
У растерској графици слика се памти као правоугаонa мрежa пиксела - битмапа. Битмапа је технички одређена ширином и висином лика у пикселима и бројем потребних битова да се упамти боја пиксела. На пример, ако имамо само 16 боја, потребна су 4 бита по пикселу за памћење његове боје. Растерска графика је зависна од резолуције. Растерске слике се не могу увећавати без губитка квалитета снимка.
Овај недостатак је превазиђен применом векторске графике, која памти слику као колекцију фигура, заједно са њиховим подацима (параметрима) који дефинишу како ће фигура бити исцртана и где ће бити лоцирана. Корњача графика је пример векторске графике.
Проучи следеће примере пројеката¶
Следећи пројекат направљен је по узору на пројекат Manikin_Dance.
Пример 1 - Пројекат Пинокио¶
У овом пројекту лик Пинокио, који ћемо сами креирати коришћењем уграђеног едитора у растерском режиму, има 5 костима. Скрипте које су му је придружене су сасвим једноставне. У једној се после клика на зелену заставицу у бесконачном циклусу смењују костими са задршком од 0.2 секунде, а у другој се стално понавља репродукција звука dance funky до краја.
Креирање лика Пинокио
Започни нови пројекат, па обриши лик мачка. За увођење новог лика изабери начин Насликај нови лик.
Отвориће се Скречов едитор слика.
Следећа табела даје опис фунција алата у растерском режиму.
Прво слободном руком нацртај главу, користећи при том алатке и .
Преименуј костим1 у Пинокио и настави са цртањем. И тело можеш нацртати слободном руком. На тело постави 4 маркера који ће ти помоћи кад будеш, на различите начине за сваки костим, на тело повезивао ноге и руке. За цртање маркера користи алатку .
Затим нацртај надлактицу једне руке коришћењем алатке без попуњавања, у коју такође стави два маркера (1).
Алатком изабери руку и превуци је. Тако добијаш другу надлактицу (2).
На сличан начин нацртај подлактицу којој ћеш додати шаку цртањем слободном руком (3).
Алатком умножи подлактицу, а затим је преврни надесно коришћењем алата за симетрично пресликавање која се налази у горњем десном углу прозора едитора (4).
Слично начину како си нацртао руке, нацртај и леву и десну ногу (5) и (6).
Пошто си нацртао све делове тела, лик Pinokio растављен на делове изгледаће као на следећој слици.
Пре но што почнеш са састављањем делова лика, десним кликом на костим Пинокија направи 4 његове копије. Они ће добити називе од Pinokio2 до Pinokio5.
Сада на 5 различитих начина треба повезати горње и доње делове ногу и руку са телом, а затим доње делове руку са горњим деловима руку и доње делове ногу са горњим деловима ногу.
Прво састави делове који дају први костим. На њему Пинокио треба да има спуштене руке и стоји право.
Алатком изабери горњи део ноге, па је превуци до тела, затим га окрени коришћењем кружића на врху изабране слике тако да се лепо повеже са телом. Преклопи маркере, кликни негде ван изабране области да се ослободиш алата, па коришћењем и подеси да спој лепо изгледа.
Сада на сличан начин треба повезати и остале делове. Свих пет костима приказано је на следећој слици.
Следећи пример илуструје употребу едитора слика у векторском режиму. У њему ћемо показати
како се више различитих ликова може креирати на основу једног постојећег.
Пример 2 - Пројекат Које је боље¶
Први лик биће мачак који се појављује као Лик1 при покретању новог пројекта, а Лик2 ћемо направити умножавањем првог. Преименоваћемо Лик1 у Срећко, а Лик2 у Мргуд.
Срећко и Мргуд биће ликови који представљају два дечака, оптимисту и песимисту, из дечије песмице Које је боље нашег песника Чика Јове Змаја. У презентацији песмице учествоваће и лик ружа са три костима: обичним, са великим трњем како је види песимиста и са великим цветом, како је види оптимиста.
Сам текст песмице приказиваће се у стрип облачцима наредбе , али лик приповедача неће се видети на позорници.
Напомена. Дужи текстови боље се приказују као део позадине, али засад још увек нису подржани ћирилићни фонтови у Скречовом графичком едитору.
Сценарио
На следећој слици приказано је како се реализује описана синхронизација дејстава ликова.
Креирање ликова и позадине
Лик Срећко ће остати без промена, а Мргуд треба да буде дебљи од њега, тамно сиве боје, са опуштеним устима и по три брка на образу. Кроз његово креирање упознаћемо алате векторског начина рада едитора слика. Измене треба вршити на оба костима.
Следећа табела даје опис фунција алата у векторском режиму.
Креирање костима за Мргуда
Када отворимо картицу Костими за Мргуда, први костим биће приказан и у графичком едитору који ће бити у векторском режиму, јер је овај лик векторска слика. На следећој слици приказано је поступно како се измене врше. Слику смо увећали на 400% да би измене могле да се ураде прецизније.
Полазимо од лика Cat1 (1). Прво ћемо променити боју мачка у тамносиву. Изабери одговарајућу боју цртања и алатку , па редом „залиј“ све области које су биле наранџасте боје и добићеш сивог мачка (2). Затим алатком узми узорак боје са контуре мачка (3), и том бојом и алатком нацртај још један брк на десном образу мачка (4). Видећеш да, иако изабереш најтању линију за цртање, тај брк има већу дебљину од преостала два. Зато ћемо за цртање трећег брка на левом образу показати нешто компликованији, али за даљи рад врло користан начин како се ово може урадити.
Изабери Мргуда (5), па кликни на дугме . Када поново кликнеш, моћи ћеш да изабереш само главу (6), а не целог мачка. Још једном разгрупиши објекте који формирају главу и моћи ћеш да изабереш само доњи брк са левог образа (7). Умножи га алтком и постави између горњег и доњег брка (8).
Пре него што поново групишемо све објекте у објекат глава мачка, а затим и у јединствен објекат – мачка Мргуда, направићемо му тужан израз лица тако што ћемо изменити уста. Алатком кликни на уста и повуци контролне тачке као на слици (9). Сада „удебљај“ Мргуда. Алатком изабери контуру тела мачка и превлачењем контролне таке му повећај стомак (10). Међутим, повећали смо само контуру, али не и белу површину на стомаку. Да бисмо и њу повећали треба да изаберемо ту површину и затим и њу да проширимо до контура стомака (11). Обоји и бели део главе у сиву Мргудову боју (12).
Тако смо направили први костим за Мргуда. Поступак треба поновити и за други костим и нови лик је спреман за програмирање.
Креирање костима за ружу
На следећој слици приказано је како смо креирали лик Ружа. Слику руже са трњем која нам одговара (1) пронашли смо у png формату па смо нове костиме за њу направили коришћењем едитора слика у растерском режиму.
Прво смо обрисали белу позадину, па додали саксију коју смо нацртали алтакама и и попунили различитим начинима попуњавања (2).
Затим смо копирали лик у још два костима. Једном костиму повећали смо трње коришћењем алатке са две боје и две дебљине (3), а другом цвет тако што смо изабрали област цвета, увећали га, па тако увећани вратили на стабљику (4).
Креирање ликова који ће „замишљати“ стихове песмице
Нацртаћемо најмањи могућ лик који ће „замишљати“ стихове песмице – једну једину тачку. На почетку та тачка, постављена горе лево, „рецитује“ читаву песмицу. Предлажемо ти да истражиш колико знакова стаје у један ред стрип облачка.
Затим умножавамо овај лик тако што десним кликом на икону лика у листи ликова отворимо контекстни мени и изаберемо опцију Умножи. Напомињемо да умножавање лика преноси копији и све скрипте изворног лика.
Упамти. Ако желиш да у пројекту радиш са више сличних ликова који се истоветно или слично понашају, прво изворном лику придружи све скрипте, а после га умножи. Тако нећеш морати новом лику да преносиш једну по једну скрипту, већ ћеш му једним потезом ископирати све.
Сада премештамо другу тачку на десну страну екрана и раздвајамо строфе песмице на ова два лика. Прву строфу рецитује леви, а десни чека, другу рецитује десни, а леви чека и тако редом док један чека, други рецитује.
Следе скрипте које описују понашање Срећка, Мргуда и Руже.
Пример 3 - Пројекат Дан и ноћ¶
У овом пројекту се два лика, куца и маца, различито понашају у зависности од тога да ли је дан или ноћ.
На позорници се налазе две кућице од којих једна припада маци, а друга куци. Придружене су им две позадине – дан и ноћ.
У позадини дан виде се сунце, светло плаво небо и трава. У позадини ноћ све осим кућица је тамно плаве боје, а на небу се виде звезде и млад месец. Позадине дан и ноћ смењују се сваких 5 секунди.
Када је дан, маца и куца излазе из својих кућица и јуре се. Маца трчи у круг, а куца се усмерава према маци и покушава да јој приђе.
Када је ноћ, маца и пас иду у своје кућице и мирују.
Креирање ликова куца и маца
Обриши Лик1 па унеси из библиотеке ликове пса (Dog2) и мачка (Cat2). Преименуј ликове у куца и маца. Куца има 3 костима, од којих ћемо користити само прва два, па трећи обриши. Маца има само један костим, па треба да направимо још један како бисмо могли да направимо анимацију кретања. За креирање другог костима маце користићемо едитор слика у векторском режиму. Десним кликом на костим маце отварамо приручни мени и бирамо Умножи. Добијамо нови костим (Cat3) који ћемо изменити у корацима које илуструје следећа слика.
Креирање позадине
Кликни на позорницу (лево од листе ликова), затим изабери картицу Позадине и векторски начин цртања. Из палете векторских алата изабери , а начин цртања нека буде без попуњавања. Нацртај кућицу као што је приказано на следећој слици.
Пошто си алатком груписаo објекте од којих је састављена кућица, коришћењем алатке умножи кућицу и копију премести у дољи десни угао позорнице, а оригинал у горњи леви угао. Затим коришћењем алатки за увећавање и смањивање подеси величине ликова тако да могу да стану у кућице.
Сада прелазимо на бојење алатком . Примена овог алата се код попуњавања области разликује од рада у растерском режиму. Наиме, ако област није затворена, у растерском режиму боја „исцури“ на читаву слику. У векторском режиму се то не дешава – уопште не можеш да извршиш бојење. Зато на увећаној слици треба прво „затворити“ област. То се ради тако што се помоћу алатке кликне на слику, па део слике који није повезан (2) изабереш и повежеш са остатком слике (3). Онда коришћењем алатке можеш да обојиш како унутрашњост (4), тако и саме линије које образују област (5).
Како смо приликом цртања кућице користили алатку , не би требало да буде проблема приликом бојења. На следећој слици приказан је начин и резултат попуњавања делова кућице.
Пошто си обојио кућице, умножи ову позадину.
Прву позадину ћемо допунити тако да представља ноћ, а другу тако да представља дан.
Креирање позадине ноћ
Нацртај попуњен тамно плави правоугаоник преко целе позорнице, а затим помоћу алатке Слој испод постави овај правоугаоник иза обе кућице (биће потребно да неколико пута кликнеш на позорницу). Када се буду виделе обе кућице, пређи на цртање месеца и звездица.
Млад месец може се нацртати тако да се прво нацрта попуњен жути круг (1), а затим делимично преко њега већи круг попуњен бојом позадине (2).
Звездицу формирамо тако што белом бојом нацртамо троугао (3), па га умножимо и заротирамо (4) и на крају цео облик попунимо белом бојом (5).
На крају ископирај готове звездице, распореди их на позадини, неке увећај, а неке смањи и ноћна позадина је завршена.
Креирање позадине дан
Нацртај сунце алатком , а зраке алатком . Затим великим светло плавим попуњеним правоугаоником ширине позорнице нацртај небо и пошаљи га онолико слојева испод колико је потребно да се виде сви детаљи. (Да си прво цртао небо, а после сунце брже би небо поставио у доњи слој, овако треба да га ставиш иза свих зракова сунца).
Затим зеленим попуњеним правоугаоником ширине позорнице нацртај траву и пошаљи и њега у позадину слике.
Поступак креирања позадине дан илуструје следећа слика.
Пошто смо завршили са позадином дан, можемо да кренемо са писањем скрипте за понашање ликова.
Синхронизација догађаја у пројекту Дан и ноћ
У овом пројекту основно понашање диктира позадина. Она разглашава поруке дан и ноћ, на које реагују оба лика.
На следећим сликама приказане су скрипте придружене ликовима из којих се види како реагује на ове поруке.
Пример 4 - Пројекат Лептирићи¶
У овом пројекту два лептира лете лево-десно, један пролази испред, а други иза цвета.
Слику „flowers” изабрали смо из библиотеке позадина. Да бисмо постигли да лептири, које имамо у два костима у библиотеци ликова, могу да лете иза цвета, морамо имати цвет као засебан лик, а не само као део позадине. Зато ћемо показати како се од дела позадине у Скречу може направити лик.
Креирање лика од дела позадине
Прво учитај нову позадину, у нашем примеру то позадина „flowers”.
Затим умножи ову позадину, па са копије обриши што више детаља око лика који желиш да искористиш и уклони новодобијени бели део позадине.
Овако очишћену позадину сачувај ко фајл на свом рачунару, а потом тај фајл учитај као нови лик.
Помери лик тако да потпуно преклапа одговарајући део позадине.
Понашање лептирића
Сада изабери лик Butterfly 1 из библиотеке ликова и придружи му следеће скрипте.
Тестирај пројекат. Лептир ће летети лево- десно и прелазити испред лика цвет.
Сада уради десни клик на сличицу лептира у листи ликова и из приручног менија изабери опцију Умножи. Појавиће се копија лептира под именом Butterfly 2 која има све скрипте које је имао први лептир у тренутку када си га умножавао.
Да би разликовао ова два лептира, пребој крила у оба костима другом лептиру црвеном бојом.
Кликни на зелену заставицу и види како се лептири крећу. Приметићеш да се нови лептир креће преко првог лептира (а), а оба лете преко лика цвет. То је зато што се сваки нови лик поставља слој изнад претходних који се налазе на позорници, као да је сваки лик нацртан на провидној фолији која се поставља преко свега што је претходно постављено на позорницу. У нашем случају, лик цвет се налази непосредно изнад позадине, први лептир је слој изнад њега, а други лептир слој изнад првог лептира.
Заустави извршавање програма, пренеси блок из групе Изглед у област скрипти другог лептира и кликни једанпут на њега, па поново покрени извршавање програма кликом на зелену заставицу.
Сада ће црвени лептир пролазити иза првог лептира (б). Кликни још једном на блок и црвени лептир ће пролазити иза лика цвета (в).
Приликом креирања овог пројекта подсетићемо се неких савета како да програмирамо брже.
Ово постижемо тако што максимално користимо оно што смо ми, или неко други, већ направили.
Трудимо се да искористимо претходно креиране ликове, позадине, скрипте и да од свега тога,
уз минималне измене и своју машту и креативност направимо нешто сасвим ново.
На Скречовом сајту може се наћи више ремикса пројекта Калеидоскоп који смо изабрали као
пример за подсећање на правила која смо до сада научили за брже креирање пројекта.
Пример 5 - Пројекат Калеидоскоп¶
Термин калеидоскоп односи се на оптичка направу у облику цеви, са три или више равних огледала која су стављена под погодним угловима тако да се предмети, обично комади разнобојног стакла, огледају у много симетричних фигура. Огледала су намештена тако да мала промена положаја стакла даје разне занимљиве симетричне слике у више боја. Ми ћемо направити истоимени пројекат који исцртава симетричне слике истовременим кретањем три лика истог облика, али различите боје у правцима који су под углом од 120 степени у односу на друга два лика.
Сценарио
На почетку се три лика – црвена жута и плава стрелица са прорезима на средини постављају у центар сцене. Једна је усмерена на горе (угао 0 о), друга у смеру 120 о, а трећа у смеру 240 о. Све три се истовремено воде тастерима са стрелицама: стрелице лево и десно ротирају их за по 5 о улево и удесно, стрелица доле води их један корак наниже, а стрелица горе један корак навише уз остављање печата. На овај начин корисник може да формира симетричне слике по жељи, као на следећој слици.
Креирање и програмирање прве стрелице
Лик стрелица можемо направити на више начина. Ево како смо ми то урадили.
У графичком едитору изабрали смо векторски начин цртања и поставили увећање на 1600%. (1)
Алатком нацртали смо црвени попуњен квадрат величине 11х11 пиксела који има центар костима на средини леве странице (2).
Алатком превукли смо обе десне контролне тачке на средину десне странице и тако претворили квадрат у троугао (3).
Алатком нацртали смо белу линију преко троугла од центра костима до десног темена (4) и тако завршили лик црвена стрелица.
Направимо сада скрипте које описују понашање стрелице.
Прва скрипта упућује лик у центар екрана, усмерава га на горе и брише са екрана све што је заостало од претходних извршавања пројекта.
Друга скрипта дефинише како се понаша лик ако се кликне на дирку ↑. У бесконачној петљи се пропитује да ли је дирка ↑ притиснута и ако јесте лик се помера један корак и оставља свој печат. Да је лик са којим радимо већи, као што је то било у претходном пројекту, требало би да направи број корака у сразмери са својом величином пре но што остави свој печат.
Сада треба три пута умножити другу скрипту и изменити је тако да дефинишемо реакције лика на притиске на остале три дирке са стрелицама. Тако направљене скрипте приказане су на следећој слици.
Креирање и програмирање преосталих стрелица
У листи ликова десним кликом на црвену стрелицу треба отворити приручни мени и изабрати опцију умножи. Ово треба поновити још једанпут како бисмо имали три лика. Наглашавамо да лик треба умножавати тек када напишемо све скрипте које описују његово понашање, јер ће тада нови лик имати и одговарајуће скрипте.
Сада треба изменити изглед нових ликова у едитору слика и променити смер у првој скрипти – другој стрелици уместо 0 о поставити 120 о, а трећој 240 о. Другу стрелицу изменићемо тако што црвену боју променимо у жуту, а трећу тако што променимо њену боју у плаву. На следећој слици приказани су коначни изгледи све три стрелице.
Упамти овај пројекат под називом Калеидоскоп и изврши га више пута какo би добио различите слике на екрану. Не заборави да оне слике које ти се допадну можеш да упамтиш као фајл и користиш их у неком од следећих пројеката.
Шта смо научили¶
Појмови: растерска графика, векторска графика.
Алати: растерски - , , , , , , , , ;
векторски - , , , , , , , , , , , , ;
заједнички - , , , , .